<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>发光文本</title>
    <link rel="stylesheet" href="./025.css" type="text/css" />
    <script>
      window.onload = () => {
        let glowInTexts = document.querySelectorAll(".glowIn")
        glowInTexts.forEach((glowInText) => {
          let letters = glowInText.textContent.split("")
          glowInText.textContent = ""
          letters.forEach((letter, i) => {
            let span = document.createElement("span")
            span.textContent = letter
            span.style.animationDelay = `${i * 0.05}s`
            glowInText.append(span)
          })
        })
      }
    </script>
  </head>
  <body>
    <!--
      text-shadow
      文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果
     -->
    <h1 class="glowIn">Hello World</h1>
    <p class="glowIn">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Mattis pellentesque id
      nibh tortor. Suspendisse ultrices gravida dictum fusce ut placerat orci
      nulla. A lacus vestibulum sed arcu.
    </p>
  </body>
</html>
